<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="wrapper">
      <!-- 标题 -->
      <h2>{{details.name}}</h2>
      <!-- 项目信息 -->
      <p><strong>项目费用：</strong> {{details.projecrMoney}}元</p>
      <p><strong>起止时间：</strong> {{details.beginTime | fmtDate}} ~ {{details.endTime | fmtDate}} </p>
      <p><strong>项目介绍：</strong> {{details.introduce}}</p>
      <!-- 步骤条 -->
      <el-steps :active="1" align-center>
        <el-step title="申请报名" description="用户选择自己喜欢的项目进行报名"></el-step>
        <el-step title="管理员确认" description="管理员确认用户报名，为用户开放账号"></el-step>
        <el-step title="用户付款" description="用户登录后可以进行确认，完成付款"></el-step>
        <el-step title="报名完成" description="报名接受后等待管理员线下通知"></el-step>
      </el-steps>
    </div>
    <!-- 表单 -->
    <div class="form">
      <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="ruleForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-col :span="11">
            <el-form-item >
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birth" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="submitForm()">确认报名</el-button><br>
        <el-button type="text" @click="toApplyQuery()">已报名？查看报名进度</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper{
  width: 980px;
  h2{
    text-align: center;
  }
}
.form{
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
  }
</style>

<script>
import {get,post} from '../utils/request'
import moment from 'moment'
export default {
  data(){
    return{
      ruleForm:{

      },
      details:null,
      rules:{
        name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
        telephone:[
            { required: true, message: '请输入手机号', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    //通过项目id查询项目详情
    findDetailsById(){
      //数据交互
      get('/index/project/findById?id='+this.$route.query.id).then((res)=>{
        if(res.status == 200){
          this.details =  res.data;
        }else{
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      })
    },
    //提交报名信息
    submitForm(){
      //将标准时间转化为时间戳
      this.ruleForm.birth = moment(this.ruleForm.birth).format('x');
      console.log(this.ruleForm);
      //获取项目id
      this.ruleForm.projectId = this.$route.query.id;
      post('/index/apply/saveOrUpdate',this.ruleForm).then((res)=>{
        if(res.status == 200){
          this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
        }else{
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      })
    },
    //跳转查询报名页面
    toApplyQuery(){
      this.$router.push({path:'/applyQuery'})
    }
  },
  created() {
    this.findDetailsById();
  },
}
</script>